<template>
  <div class="page-container">
    <!-- 缩放容器：承载所有内容，基于原9600*2240分辨率 -->
    <div class="scale-container">
      <!-- 顶部标题 -->
      <div class="headTitle">{{ headTitle }}</div>
      <div class="headButton" @click="backHome"></div>
      <div class="left1" @click="goToService('ningbo')"></div>
      <div class="right1" @click="goToService('yancheng')"></div>
      <!-- 左边内容 -->
      <div class="left">
        <div class="box">
          <div class="headImg"></div>
          <div class="title">中汽研临港数据科技（上海）有限公司</div>
          <div class="content">
            <img class="img1" src="/imgs/shanghai/left.png" />
            <p class="contentTitle">
              中汽研临港数据科技（上海）有限公司由中汽研汽车科技（上海）有限公司与上海临港跨境经济发展有限公司于2024年合资成立，是临港新片区管委会认定的汽车数据跨境核心支撑机构。公司受上海市经信委委托，牵头研制汽车数据跨境负面清单，并主导成立”汽车数据跨境流通工作委员会“。2024年7月，中汽中心与临港管委会联合揭牌全国首个汽车领域数据跨境创新中心，构建覆盖政策研究、场景试点、合规服务的全链条能力。
            </p>
          </div>
        </div>
        <div class="box2">
          <div class="headImg"></div>
          <div class="title">上海淞泓智能汽车科技有限公司</div>
          <div class="content">
            <img class="img1" src="/imgs/shanghai/图层 1064.png" />
            <p class="contentTitle">由中汽中心、上海汽车城、上电科、上机检于 2017
              年6月投资新建，致力于推动智能网联汽车行业发展，产业创新成果孵化转化;上海市唯一的智能网联汽车创新中心、上海市智能网联汽车测试与示范推进工作小组第三方机构、长三角智能网联汽车行业产教融合共同体理事长单位。</p>
          </div>
        </div>
        <div class="box3">
          <div class="content">
            <div class="headImg"></div>
            <div class="title">高素质人才团队</div>
          </div>
          <div class="content2">
            <div class="leftbox">
              <div class="box2-1" v-for="(item, index) in statsData" :key="index">
                <img class="img1" :src="item.icon" />
                <div class="box2-2">
                  <div class="text">{{ item.label }}</div>
                  <div class="box2-3">
                    <div class="text2">{{ item.value }}</div>
                    <div class="text3">{{ item.unit }}</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="rightbox"></div>
          </div>
        </div>
      </div>
      <!-- 中间内容 -->
      <div class="middle">
        <div class="content">
          <div class="img1"></div>
          <div class="content1">
            <div class="title">
              中汽研汽车科技（上海）有限公司是中国汽车技术研究中心有限公司的全资二级子公司，简称中汽科技（上海），以汽车数据跨境业务为重点，标准协同赋能，以高端自主技术为支撑，深度开拓海内外业务合作，为行业提供汽车创新价值链全能力服务，形成了“国际业务窗口
              + 基础数据平台 + 自主技术生态”的业务布局。以“服务汽车产业安全可持续发展”为使命，致力于建设具有全球影响力的汽车科技创新高地，助力中国汽车产业国际化发展。</div>
            <div class="title">
              中汽科技（上海）是中汽中心华东分中心的核心载体。作为战略支点，为华东地区提供覆盖汽车全产业链、全生命周期的高质量专业服务，重点聚焦战略新兴产业，深入参与长三角一体化发展的国家重大战略。</div>
          </div>
        </div>
        <div class="content15">中汽研汽车科技（上海）有限公司</div>
        <div class="content18">
          <div class="tubiao1"></div>
          <span class="tubiaoTitle">成立时间<span class="tubiaoValue">2004</span>年</span>
          <div class="tubiao2"></div>
          <span class="tubiaoTitle">注册资金<span class="tubiaoValue">1</span>亿元</span>
          <div class="tubiao3"></div>
          <span class="tubiaoTitle">子公司<span class="tubiaoValue">2</span>家</span>
        </div>
        <div class="content19">
          <div class="img1"></div>
          <div class="img2"></div>
          <div class="img3"></div>
          <span class="title">上海</span>
          <div class="pointImg"></div>
          <div class="img4"></div>
          <div class="img5"></div>
          <div ref="lottieRef" class="lottie-box"></div>
        </div>
      </div>
      <!-- 右边内容 -->
      <div class="right">
        <div class="box">
          <div class="headbox">
            <div class="headImg"></div>
            <div class="title">功能介绍</div>
          </div>
          <div class="content">
            <!-- 左侧按钮区域：循环渲染，绑定点击事件和选中状态 -->
            <div class="left-buttons">
              <div v-for="(page, index) in pages" :key="index" class="btn" :class="{ active: currentPage === index }"
                @click="handleClick(index)">
                {{ page.btnName }}
              </div>
            </div>
            <!-- 右侧内容区域（动态渲染当前页内容） -->
            <div class="rightbox">
              <div class="box1-1">
                <!-- 文本始终展示（假设文本必传） -->
                <div class="text">{{ pages[currentPage].text }}</div>
                <!-- 按钮：btnText 不为空时展示 -->
                <div class="btn" v-if="pages[currentPage].btnText">
                  {{ pages[currentPage].btnText }}
                </div>
                <!-- 项目列表：items 数组不为空时展示 -->
                <div class="item" v-if="pages[currentPage].items.length > 0">
                  <template v-for="(item, i) in pages[currentPage].items" :key="i">
                    <div class="item1">{{ item }}</div>
                    <div class="icon" v-if="i !== pages[currentPage].items.length - 1">|</div>
                  </template>
                </div>
              </div>
              <!-- 图片：imgUrl 不为空时展示 -->
              <div class="box1-2" v-if="pages[currentPage].imgUrl"
                :style="{ backgroundImage: `url(${pages[currentPage].imgUrl})` }">
              </div>
            </div>
          </div>
        </div>
        <div class="box2">
          <div class="headbox">
            <div class="headImg"></div>
            <div class="title">一体化业务生态</div>
          </div>
          <div class="content">
            <img class="img1" src="/imgs/shanghai/组 7824.png" />
          </div>
        </div>
        <div class="box3">
          <div class="headbox">
            <div class="headImg"></div>
            <div class="title">服务能力</div>
          </div>
          <div class="content">
            <div class="title">汽车数据流通服务平台</div>
            <div class="left-buttons">
              <div v-for="(page, index) in pages2" :key="index" class="btn" :class="{ active: currentPage2 === index }"
                @click="handleClick2(index)">
                {{ page.btnName }}
              </div>
            </div>
            <div class="rightbox">
              <div class="box1-1">
                <div class="text">{{ pages2[currentPage2].text }}</div>
                <div class="content-btn" v-if="pages2[currentPage2].btnText">
                  {{ pages2[currentPage2].btnText }}
                </div>
                <div class="item" v-if="pages2[currentPage2].items.length > 0">
                  <template v-for="(item, i) in pages2[currentPage2].items" :key="i">
                    <div class="item1">{{ item }}</div>
                    <div class="icon" v-if="i !== pages2[currentPage2].items.length - 1">|</div>
                  </template>
                </div>
              </div>
              <div class="box1-2" v-if="pages2[currentPage2].imgUrl"
                :style="{ backgroundImage: `url(${pages2[currentPage2].imgUrl})` }"></div>
            </div>
          </div>
          <div class="content" style="position: relative;left: -140px;">
            <div class="title">汽车自主装备技术平台</div>
            <div class="left-buttons">
              <div v-for="(page, index) in pages3" :key="index" class="btn" :class="{ active: currentPage3 === index }"
                @click="handleClick3(index)">
                {{ page.btnName }}
              </div>
            </div>
            <div class="rightbox">
              <div class="box1-1">
                <div class="text">{{ pages3[currentPage3].text }}</div>
                <div class="content-btn" v-if="pages3[currentPage3].btnText">
                  {{ pages3[currentPage3].btnText }}
                </div>
                <div class="item" v-if="pages3[currentPage3].items.length > 0">
                  <template v-for="(item, i) in pages3[currentPage3].items" :key="i">
                    <div class="item1">{{ item }}</div>
                    <div class="icon" v-if="i !== pages3[currentPage3].items.length - 1">|</div>
                  </template>
                </div>
              </div>
              <div class="box1-2" v-if="pages3[currentPage3].imgUrl"
                :style="{ backgroundImage: `url(${pages3[currentPage3].imgUrl})` }"></div>
            </div>
          </div>
          <div class="content" style="position: relative;top: 210px;">
            <div class="title">产业技术咨询验证平台</div>
            <div class="left-buttons">
              <div v-for="(page, index) in pages4" :key="index" class="btn" :class="{ active: currentPage4 === index }"
                @click="handleClick4(index)">
                {{ page.btnName }}
              </div>
            </div>
            <div class="rightbox">
              <div class="box1-1">
                <div class="text">{{ pages4[currentPage4].text }}</div>
                <div class="content-btn" v-if="pages4[currentPage4].btnText">
                  {{ pages4[currentPage4].btnText }}
                </div>
                <div class="item" v-if="pages4[currentPage4].items.length > 0">
                  <template v-for="(item, i) in pages4[currentPage4].items" :key="i">
                    <div class="item1">{{ item }}</div>
                    <div class="icon" v-if="i !== pages4[currentPage4].items.length - 1">|</div>
                  </template>
                </div>
              </div>
              <div class="box1-2" v-if="pages4[currentPage4].imgUrl"
                :style="{ backgroundImage: `url(${pages4[currentPage4].imgUrl})` }"></div>
            </div>
          </div>
          <div class="content" style="position: relative;left:50px;top: 210px;">
            <div class="title">汽车行业人才培养平台</div>
            <div class="left-buttons">
              <div v-for="(page, index) in pages5" :key="index" class="btn" :class="{ active: currentPage5 === index }"
                @click="handleClick5(index)">
                {{ page.btnName }}
              </div>
            </div>
            <div class="rightbox">
              <div class="box1-1">
                <div class="text">{{ pages5[currentPage5].text }}</div>
                <div class="content-btn" v-if="pages5[currentPage5].btnText">
                  {{ pages5[currentPage5].btnText }}
                </div>
                <div class="item" v-if="pages5[currentPage5].items.length > 0">
                  <template v-for="(item, i) in pages5[currentPage5].items" :key="i">
                    <div class="item1">{{ item }}</div>
                    <div class="icon" v-if="i !== pages5[currentPage5].items.length - 1">|</div>
                  </template>
                </div>
              </div>
              <div class="box1-2" v-if="pages5[currentPage5].imgUrl"
                :style="{ backgroundImage: `url(${pages5[currentPage5].imgUrl})` }"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import lottie from 'lottie-web';
//路由
import { useRouter } from 'vue-router'
const router = useRouter();
const headTitle = ref('中国汽车技术研究中心有限公司数字沙盘')
// 响应式数据
const lottieRef = ref(null);
let animationInstance = null;
// 响应式状态：控制弹窗显示
const showVideo = ref(false);
// 视频DOM引用（用于控制播放/暂停）
const videoRef = ref(null);
// 视频地址（待提供，先定义变量占位）
const videoUrl = ref('');
// 2. 响应式状态：当前页码（0-2，对应3页内容）
const currentPage = ref(0);
// 3. 自动轮播定时器
let timer = null;
// 1. 响应式数据（支持动态更新）
const statsData = ref([
  {
    icon: '/imgs/shanghai/组 7752 拷贝 3(1).png', // 平均年龄图标
    label: '平均年龄',
    value: 33,
    unit: '岁',
  },
  {
    icon: '/imgs/shanghai/组 7752 拷贝 17(1).png', // 平均工作年限图标
    label: '平均工作年限',
    value: 9,
    unit: '年',
  },
  {
    icon: '/imgs/shanghai/组 7752 拷贝 16.png', // 硕士学历占比图标
    label: '硕士学历占比',
    value: 64,
    unit: '%',
  },
  {
    icon: '/imgs/shanghai/组 7752 拷贝 17.png', // 海外人才占比图标
    label: '海外人才占比',
    value: 20,
    unit: '%',
  }
]);
// 切换到指定页
const handleClick = (index) => {
  currentPage.value = index;
  resetTimer(); // 点击后重置定时器，避免立即自动切换
};
//跳转路由
const backHome = () => {
    router.push({ name: 'home' })
}
// 切换到下一页（循环）
const goToNextPage = () => {
  currentPage.value = (currentPage.value + 1) % pages.length;
};
// 重置定时器
const resetTimer = () => {
  clearInterval(timer);
  timer = setInterval(goToNextPage, 5000); // 5秒切换一次
};
//顶部第一块内容
const pages = [
  // 第1页内容
  {
    btnName: '国家技术标准创新基地（汽车）服务中心',
    text: '立足国际标准协同与产业赋能目标，依托国际标准合作机制，以实体化创新基地为载体，面向车企、科技公司、初创企业客户，围绕智能驾驶、数据安全、海外市场拓展场景，开展标准研究、成果展示、全链条服务，助力企业降低国际合规成本、缩短国际认证周期，优先进入全球供应链。',
    btnText: '协同网络',
    items: ['国内外车企', '科研机构', '标准化组织', '地方政府'],
    imgUrl: '/imgs/shanghai/1.png' // 第1页图片
  },
  // 第2页内容（结构不同：文本、项目、图片均不同）
  {
    btnName: 'C-ASAM 国际标准组织服务',
    text: 'C-ASAM 为会员单位提供智能网联汽车标准制定与研发领域国际化会员服务，包括但不限于下载和使用 ASAM 所有标准与白皮书、参加 ASAM 活动与标准制定项目、ASAM 年度奖项评选推荐、ASAM 标准进展报告等。另外，结合本土产业优势，为会员单位提供专题研究及咨询增值服务等内容',
    btnText: '',
    items: ['全球400+ 会员', '中国唯一官方代表单位', '国际标准制定与转化', '汽车供应链管理', '汽车产业专业标准'],
    imgUrl: '/imgs/shanghai/2.png' // 第2页图片
  },
  // 第3页内容（结构不同）
  {
    btnName: '职业技能标准服务能力',
    text: '基于对汽车服务全产业链职业技能的逐级解构，建立可量化、可认证、可追溯的岗位能力模型与培养路径。该体系依托中国机械工业教育协会、汽车人才培养基地生态联盟成员单位等，针对汽车领域产业链的实际用人需求，结合科研院所、高等院校、职业学院、技工院校等对应专业（方向）的人才培养规律，开发定制化课程教学资源，以满足人才供给与人才需求的紧密对接。',
    btnText: '',
    items: [''],
    imgUrl: '/imgs/shanghai/3.png' // 第3页图片
  }
];
// 2. 响应式状态：当前页码（0-4，对应5页内容）
const currentPage2 = ref(0);
// 3. 自动轮播定时器
let timer2 = null;
// 切换到指定页
const handleClick2 = (index) => {
  currentPage2.value = index;
  resetTimer2(); // 点击后重置定时器，避免立即自动切换
};
// 切换到下一页（循环）
const goToNextPage2 = () => {
  currentPage2.value = (currentPage2.value + 1) % pages2.length;
};
// 重置定时器
const resetTimer2 = () => {
  clearInterval(timer2);
  timer2 = setInterval(goToNextPage2, 5000); // 5秒切换一次
};
//底部第一块数据
const pages2 = [
  {
    btnName: '汽车数据跨境流通合规服务',
    text: '立足中国汽车产业全球化合规运营目标，我们以动态合规风险管理模型为内核，搭载 SaaS 订阅平台，整合“法规检查库 + 规则库 + 风险库 + 方案库”四大产品矩阵（含全球法规库作为基础支撑模块），联合法律政策与 AI 算法双引擎团队，为出海车企及生态伙伴提供覆盖数据跨境、本地化雇佣、认证合规的全链路服务。依托《临港新片区数据跨境流动分类分级管理办法（试行）》标准，已落地智能网联汽车等重要数据目录编制，提供政策咨询、场景评估等专项服务；同步开发重要数据识别、跨境安全评估等功能模块，实现中国与海外汽车数据双向安全流通。从标准到落地，从评估到实施，助力企业降本增效，让合规成为国际化发展助推器。',
    items: ['国家级标准背书', '合规一站式服务', '跨境法规数据', '出境标准体系'],
    imgUrl: '/imgs/shanghai/4.png'
  },
  {
    btnName: '中国汽车数据出境指导服务',
    text: '依托汽车数据跨境流动合规平台，为中国汽车企业提供全链路数据出境合规指导服务。 通过场景化数据清单精准定位出境范围，集成安全防护工具筑牢数据屏障，实时监测 流通动态确保可追溯，定制分层培训强化内生合规力，并整合国际规则库适配出海需 求。覆盖“识别 - 防护 - 流通 - 提升 - 对接”全周期，助力企业高效应对国内外监管， 平衡国内安全与国际规则，为中国汽车全球化发展守好数据安全关。',
    items: ['全链路支撑', '实时动态监管', '政企协同服务', '多维安全管理'],
    imgUrl: '/imgs/shanghai/5.png'
  },
  {
    btnName: '汽车研发性能数据技术服务',
    text: '围绕主机厂和设计公司在整车规划、车型定位和开发目标定义的对标数据需求，开展汽车性能数据积累、研究、分析、销售工作，构建国内外唯一覆盖乘用车、商用车及零部件全专业性能及结构数据的平台，高效支撑整车和零部件的产品规划与开发。',
    items: ['数据全景智核', '数据共建共享', '全周期服务覆盖'],
    imgUrl: '/imgs/shanghai/6.png'
  },
  {
    btnName: '汽车新生态产业链数据服务',
    text: '立足产业链精准协同与技术创新目标，开展互联网推广、互联网接口、数据传输等服务，以线上数字化平台 + 线下创新生态圈为载体，整合全球供应商及采购资源，实现最新创新技术发布，供需精准匹配、技术品牌营销、市场分析咨询等功能矩阵，促进 整零交流与价值链整合开放创新，为打造汽车新生态产业链提供综合数据服务。',
    items: ['多商城矩阵B2B 订货商城、跨境出口商城等', '直连全球供应商与多资源整合采购资源等', '多领域赋能技术、流量资金等'],
    imgUrl: '/imgs/shanghai/7.png'
  },
  {
    btnName: '汽车运管数据资源交易服务',
    text: '基于中汽中心牵头成立的智能新能源汽车数据产业联盟，搭建汽车运管数据资源交易平台，通过整合行业组织、海外海关、地方新能源汽车数据平台、企业平台等数据资源，构建全球汽车数据产品聚集地，为数据生产商、数据贸易商、数据加工商及数据应用商提供合规、权威、多样的数据产品。',
    items: ['权威国内外多源数据要素集', '数据要素融合智能装备', '汽车技术可信空间技术基座'],
    imgUrl: '/imgs/shanghai/8.png'
  }
];
// 2. 响应式状态：当前页码（0-2，对应3页内容）
const currentPage3 = ref(0);
// 3. 自动轮播定时器
let timer3 = null;
// 切换到指定页
const handleClick3 = (index) => {
  currentPage3.value = index;
  resetTimer3(); // 点击后重置定时器，避免立即自动切换
};
// 切换到下一页（循环）
const goToNextPage3 = () => {
  currentPage3.value = (currentPage3.value + 1) % pages3.length;
};
// 重置定时器
const resetTimer3 = () => {
  clearInterval(timer3);
  timer3 = setInterval(goToNextPage3, 5000); //5秒切换一次
};
//底部第二块内容
const pages3 = [
  // 第1页内容
  {
    btnName: '国产碰撞假人系列产品',
    text: '碰撞假人是汽车安全及技术标准体系的核心装备。为了攻关汽车安全领域“卡脖子技术”装备，自主创新中国化安全标准体系，中汽中心打造形成了集核心技术、关键装备、系统集成、检验检测自主可控的技术体系。中汽中心完全自研生产的中国体征假人后续将应用于 C-NCAP ，国产化 - 混Ⅲ系列碰撞假人 H Ⅲ -5、H Ⅲ -50、H Ⅲ -95 在性能、质量、外观全面对标国外同等品牌。目前国产碰撞假人已在多个国家级检测机构、主机厂、零部件厂商的相关法规试验中实际应用。',
    btnText: '协同网络',
    items: ['完全自主研发成本自主可控', '中国体征特色突破“卡脖子”'],
    imgUrl: '/imgs/shanghai/8.png' // 第1页图片
  },
  // 第2页内容（结构不同：文本、项目、图片均不同）
  {
    btnName: '高端自研国产测试装备',
    text: '在前沿标准与测评技术的指导下，立足于行业权威的检测技术与测试经验，履行行业职责，解决汽车行业在高端测试装备领域“技术垄断、成本控制、产业链安全”等痛点，在主被动安全、新能源、智能网联、节能环保等领域打造精准、可靠、领先的测试工具与配套服务',
    btnText: '',
    items: ['行业平台支撑示范应用先行', '先进技术赋能互动合作共赢'],
    imgUrl: '/imgs/shanghai/9.png' // 第2页图片
  },
  // 第3页内容（结构不同）
  {
    btnName: '充电性能兼容验证方案',
    text: '中汽科技（上海）与宁德时代科技联合开发的充电性能兼容验证方案，集交流和直流测试于一体，兼容了全球主流的充电标准，为客户提供标准充放电测试、自定义开发测试和海量中外案例库测试研究。主要针对开发验证不充分、案例少、开源度差、标准迭代升级快等问题，提供一整套高开放性和高集成度的解决方案。',
    btnText: '',
    items: ['样例测试丰富', '参数灵活可调', '法规应对及时', '欧标摸底应对'],
    imgUrl: '/imgs/shanghai/10.png' // 第3页图片
  }
];
// 2. 响应式状态：当前页码（0-2，对应3页内容）
const currentPage4 = ref(0);
// 3. 自动轮播定时器
let timer4 = null;
// 切换到指定页
const handleClick4 = (index) => {
  currentPage4.value = index;
  resetTimer4(); // 点击后重置定时器，避免立即自动切换
};
// 切换到下一页（循环）
const goToNextPage4 = () => {
  currentPage4.value = (currentPage4.value + 1) % pages4.length;
};
// 重置定时器
const resetTimer4 = () => {
  clearInterval(timer4);
  timer4 = setInterval(goToNextPage4, 5000); //5秒切换一次
};
//底部第二块内容
const pages4 = [
  // 第1页内容
  {
    btnName: '汽车先进功能验证服务',
    text: '以进一步落实华东一体化协同发展，彰显“高端技术枢纽”定位为目标，依托标准法规和 C-NCAP、C-ICAP 等测评体系打造智行、智泊、智舱三大核心产品服务能力。团队成立以来，每年完成汽车功能验证项目几十项，服务客户二十余家。面向整车制造商、技术方案解决商、零部件配套企业等全产业链，围绕封闭场地、公开道路、座舱大模型等业务场景，为行业提供从“技术标定”到“场景验证”的一体化技术解决方案，致力于成为华东地区领先、全国一流的汽车先进功能验证服务商。',
    btnText: '',
    items: ['标准化设备与场地', '20+核心客户群体', '华东一站式解决方案'],
    imgUrl: '/imgs/shanghai/12.png' // 第1页图片
  },
  // 第2页内容（结构不同：文本、项目、图片均不同）
  {
    btnName: '汽车产品技术咨询服务',
    text: '锚定“区城性汽车智库 + 高端技术枢纽 " 双定位，围绕“车路云一体化”规划建设、系统验证、场景落地等核心业务，组建一站式服务团队，打造“车路云一体化”咨询规划、产品验证两大服务能力，为行业提供从规划、建设到验证的一体化技术解决方案，致力于成为政企合作标杆，为行业发展提供关键力量。目前已服务多地政府及示范区，包括克拉玛依市车路云数字化综合服务项目、上海市奉贤区示范区车路协同应用建设项目等。',
    btnText: '',
    items: ['规划建设', '系统验证', '场景落地'],
    imgUrl: '/imgs/shanghai/13.png' // 第2页图片
  },
  // 第3页内容（结构不同）
  {
    btnName: '汽车国际化全链路服务',
    text: '以构建汽车先进技术产业生态、推动行业规范化发展为目标，依托国家级试点示范区运营经验，凭借产业政策研究、标准体系构建、示范区建设与运营等核心能力，面向各地方政府提供 “政策研究 - 标准制定 - 区域协同” 全链条咨询服务。团队汇聚行业专家，具备从顶层设计、场景规划到落地运营的系统化服务能力。已服务超 10 家政府部门，协助修订《上海市汽车智能化测试与示范实施办法》等 20 余项政策文件，助力长三角建立测试牌照互认机制，推动超 10 个跨区域商业化项目落地，覆盖 5000 公里测试道路资源，以政策精准化、产业规范化、生态协同化路径加速各地方汽车智能化与网联化商业化进程。',
    btnText: '',
    items: ['全国首创', '权威背书', '专家团队', '项目遍布全国', '成果导向'],
    imgUrl: '/imgs/shanghai/14.png' // 第3页图片
  }
];
// 2. 响应式状态：当前页码（0-2，对应3页内容）
const currentPage5 = ref(0);
// 3. 自动轮播定时器
let timer5 = null;
// 切换到指定页
const handleClick5 = (index) => {
  currentPage5.value = index;
  resetTimer5(); // 点击后重置定时器，避免立即自动切换
};
// 切换到下一页（循环）
const goToNextPage5 = () => {
  currentPage5.value = (currentPage5.value + 1) % pages5.length;
};
// 重置定时器
const resetTimer5 = () => {
  clearInterval(timer5);
  timer5 = setInterval(goToNextPage5, 5000); //5秒切换一次
};
//底部第二块内容
const pages5 = [
  // 第1页内容
  {
    btnName: '汽车国家职业数字展馆服务',
    text: '以产业需求为导向，通过整合产业资源、教育资源和评价资源，打造科学、专业、全面的汽车行业职业解读与职业规划的数字化平台，推动“岗位标准共建 - 课程资源开发-技能认证落地”的全链路协作，探索“产教评”深度融合，推进产业人才培养精准化、就业指导精细化和供需对接高效化，助力汽车企业从“人才需求方”转变为“人才定义者与培养者”。',
    btnText: '',
    items: ['国家级平台', '20+品牌形象与雇主价值传播', '人才标准领航', '产教评闭环生态'],
    imgUrl: '/imgs/shanghai/15.png' // 第1页图片
  },
  // 第2页内容（结构不同：文本、项目、图片均不同）
  {
    btnName: '汽车产教评一体化平台服务',
    text: '汽车产教评一体化平台服务聚焦产业人才培养中“岗位能力与系统需求错位、教育供给与产业需求脱节、人才转型评价体系僵化”三大痛点，以多方协同与供需适配机制为核心，赋能政企校行主体，贯穿人才“引用育留”全流程。平台深度整合 AI 能力，实现精准岗位匹配、个性化成长导航与动态能力评估，构建产教评深度融合的全链条培养新范式，驱动产业人才精准化培养与生态协同化发展。',
    btnText: '',
    items: ['AI全链条人才精准匹配', '政企校行协同生态平台', '产教评三维融合新范式'],
    imgUrl: '/imgs/shanghai/16.png' // 第2页图片
  },
  // 第3页内容（结构不同）
  {
    btnName: '高技术及高等学历教育服务',
    text: '依托国内外顶尖高校资源与行业领军专家团队，面向企业科技骨干、技术管理人员及高层次人才，聚焦战略性前瞻技术领域，打造覆盖高技术能力提升与高学历深造的全链条培养服务体系，帮助学员实现职业技能与学术能力的双重突破，全面增强企业在技术创新、战略布局和人才梯队建设方面的综合竞争力。',
    btnText: '',
    items: ['权威师资力量', '顶尖高校资源', '实战导向培养', '灵活学习机制'],
    imgUrl: '/imgs/shanghai/17.png' // 第3页图片
  },
  // 第4页内容（结构不同）
  {
    btnName: '国内外高技能人才培养服务',
    text: '构建基于标准化、面向国际化、覆盖产业链的汽车领域高技能人才培养体系，依托国内汽车人才培养基地生态联盟与海外“智车学堂”人才培养认证联盟的合作形式，针对紧密贴合产业企业用人实际需求的线上线下各类教学资源实施整合，旨在面向院校师生与企业技能人才，聚焦智能网联汽车、新能源汽车等前沿岗位，提供集理论培训、实操教学、岗位考核、能力评价于一体的全流程职业技能提升服务。',
    btnText: '',
    items: ['数字化结合实践灵活培训形式', '精准对接技能人才培养供给', '“中文 + 技能”助力产业链出海'],
    imgUrl: '/imgs/shanghai/18.png' // 第4页图片
  }

];
// 初始化 Lottie 动画
const initLottieAnimation = () => {
  if (lottieRef.value) {
    animationInstance = lottie.loadAnimation({
      container: lottieRef.value,
      path: '/animations/shanghai.json',
      loop: true,
      autoplay: true,
    });
  }
};
//跳转路由
const goToService = (item) => {
  router.push({ name: item })
}
onMounted(() => {
  timer = setInterval(goToNextPage, 5000);
  timer2 = setInterval(goToNextPage2, 5000);
  timer3 = setInterval(goToNextPage3, 5000);
  timer4 = setInterval(goToNextPage4, 5000);
  timer5 = setInterval(goToNextPage5, 5000);
  initLottieAnimation();
})
// 组件销毁时清除定时器（防止内存泄漏）
onUnmounted(() => {
  clearInterval(timer);
  clearInterval(timer2);
  clearInterval(timer3);
  clearInterval(timer4);
  clearInterval(timer5);
});
</script>
<style scoped>
@keyframes sweep {
  0% {
    background-position: -100%;
  }

  100% {
    background-position: 200%;
  }
}

/* 上下浮动动画 */
@keyframes floatUpDown {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-20px);
    /* 向下移动20px */
  }
}

/* 视频弹窗：全屏覆盖 */
.video-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 9600px;
  height: 2240px;
  background-color: rgba(0, 0, 0, 0.95);
  /* 深色背景突出视频 */
  z-index: 9999;
  /* 最高层级，覆盖所有内容 */
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  box-sizing: border-box;
}

/* 视频播放器：自适应全屏 */
.video-player {
  width: 9600px;
  height: 2240px;
  /* 避免超出屏幕 */
  object-fit: contain;
  /* 保持视频比例，不拉伸 */
}

/* 关闭按钮 */
.video-close {
  position: absolute;
  top: 20px;
  right: 30px;
  color: #fff;
  font-size: 40px;
  cursor: pointer;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  transition: all 0.3s;
}

.video-close:hover {
  background-color: #ff4d4f;
  /* hover时变红，增强交互 */
}

/* 禁止页面滚动（弹窗显示时） */
:deep(body) {
  overflow: v-bind('showVideo ? "hidden" : "auto"');
}


/* 可视区域容器：固定为目标分辨率6240*1456 */
.page-container {
  width: 6240px;
  height: 1456px;
  overflow: hidden;
  position: relative;
  margin: 0 auto;
}

/* 原始设计稿容器：基于9600*2240，通过缩放适配新分辨率 */
.scale-container {
  width: 9600px;
  height: 2240px;
  transform: scale(0.65);
  transform-origin: 0 0;
  position: relative;
}


.lottie-box {
  z-index: 99;
  position: absolute;
  left: 969px;
  top: 386px;
  width: 885px;
  height: 889px;
  font-size: 80px;
}

.headTitle {
  text-align: center;
  position: relative;
  top: -24px;
  font-size: 130px;
  font-family: YouSheBiaoTiHei;
  font-weight: 400;
  color: #FFFFFF;
  background: linear-gradient(0deg, rgba(0, 216, 255, 0.66) 10%, rgba(255, 255, 255, 1) 70%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.left1{
  z-index: 999;
  cursor: pointer;
  top: 45%;
  left: 10px;
  position: absolute;
  width: 94px;
  height: 258px;
  background-image: url("/imgs/home/left1.png");
  background-position: left;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.right1{
  z-index: 999;
  cursor: pointer;
  position: absolute;
  top: 45%;
  right: 10px;
  width: 94px;
  height: 258px;
  background-image: url("/imgs/home/right1.png");
  background-position: left;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.headButton {
    cursor: pointer;
    display: flex;
    float: inline-end;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: 20px;
    right: 20px;
    width: 78px;
    height: 78px;
    background-image: url("/imgs/ningbo/cancel.png");
    background-position: left;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.left {
  display: flex;

  .box {
    margin-left: 140px;
    display: flex;
    width: 1372px;
    height: 168px;
    background-image: url("/imgs/ningbo/t.png");
    background-position: left;
    background-size: 100% 100%;
    background-repeat: no-repeat;

    .headImg {
      margin-left: 220px;
      margin-top: 41px;
      width: 53px;
      height: 58px;
      background-image: url("/imgs/ningbo/菱形 拷贝.png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }

    .title {
      margin-left: 30px;
      margin-top: 22px;
      height: 49px;
      font-family: "微软雅黑粗体";
      font-weight: 400;
      font-size: 57px;
      color: #FFFFFF;
    }

    .content {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: flex-start;
      position: absolute;
      top: 378px;
      width: 1476px;
      height: 1096px;
      background-image: url("/imgs/ningbo/矩形 933 拷贝 3.png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;

      .img1 {
        width: 1407px;
        height: 646px;
      }

      .contentTitle {
        padding: 0 20px;
        text-align: justify;
        text-justify: inter-ideograph;
        position: relative;
        line-height: 60px;
        top: -138px;
        text-indent: 3.5ch;
        width: 1356px;
        height: 100px;
        font-family: "微软雅黑常规";
        font-weight: 400;
        font-size: 34px;
        color: #FFFFFF;
      }
    }
  }

  .box2 {
    margin-left: 132px;
    display: flex;
    width: 1372px;
    height: 168px;
    background-image: url("/imgs/ningbo/t.png");
    background-position: left;
    background-size: 100% 100%;
    background-repeat: no-repeat;

    .headImg {
      margin-left: 220px;
      margin-top: 41px;
      width: 53px;
      height: 58px;
      background-image: url("/imgs/ningbo/菱形 拷贝.png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }

    .title {
      margin-left: 30px;
      margin-top: 22px;
      height: 49px;
      font-family: "微软雅黑粗体";
      font-weight: 400;
      font-size: 57px;
      color: #FFFFFF;
    }

    .content {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: flex-start;
      position: absolute;
      top: 378px;
      width: 1476px;
      height: 1096px;
      background-image: url("/imgs/ningbo/矩形 933 拷贝 3.png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;

      .img1 {
        width: 1407px;
        height: 646px;
      }

      .contentTitle {
        padding: 0 20px;
        text-align: justify;
        text-justify: inter-ideograph;
        position: relative;
        line-height: 60px;
        top: -98px;
        text-indent: 3.5ch;
        width: 1356px;
        height: 100px;
        font-family: "微软雅黑常规";
        font-weight: 400;
        font-size: 34px;
        color: #FFFFFF;
      }
    }
  }

  .box3 {
    display: flex;
    position: absolute;
    margin-top: 1256px;
    margin-left: 132px;
    display: flex;

    .content {
      display: flex;
      height: 158px;
      width: 2247px;
      flex-wrap: nowrap;
      flex-direction: row;
      background-image: url("/imgs/ningbo/t(1).png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;

      .headImg {
        margin-left: 220px;
        margin-top: 41px;
        width: 53px;
        height: 58px;
        background-image: url("/imgs/ningbo/菱形 拷贝.png");
        background-position: left;
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }

      .title {
        margin-left: 30px;
        margin-top: 22px;
        height: 49px;
        font-family: "微软雅黑粗体";
        font-weight: 400;
        font-size: 57px;
        color: #FFFFFF;
      }
    }

    .content2 {
      position: absolute;
      left: 40px;
      flex-wrap: nowrap;
      top: 152px;
      flex-direction: row;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 140px;

      .leftbox {
        gap: 50px;
        align-self: end;
        width: 860px;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;

        .box2-1 {
          display: flex;
          flex-direction: row;

          .img1 {
            width: 161px;
            height: 161px;
            /* background-image: url("/imgs/shanghai/组 7752 拷贝 3(1).png");
            background-position: left;
            background-size: 100% 100%;
            background-repeat: no-repeat; */
          }

          .box2-2 {
            display: flex;
            flex-direction: column;

            .text {

              font-family: "微软雅黑常规";
              font-weight: 400;
              font-size: 39px;
              color: #FFFFFF;
            }

            .box2-3 {
              display: flex;
              width: 220px;
              flex-wrap: nowrap;
              flex-direction: row;
              align-items: center;

              .text2 {

                font-family: YouSheBiaoTiHei;
                font-weight: 400;
                font-size: 88px;
                color: #FFFFFF;
                background: linear-gradient(0deg, rgba(0, 216, 255, 0.6) 10%, rgba(255, 255, 255, 1) 70%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
              }

              .text3 {
                font-family: "微软雅黑常规";
                font-weight: 400;
                font-size: 42px;
                color: #969696 !important;
              }
            }
          }
        }
      }

      .rightbox {
        display: flex;
        gap: 20px;
        /* 文本区与图片区间隔 */
        width: 1921px;
        height: 525px;
        background-image: url("/imgs/shanghai/组 7780.png");
        background-position: left;
        background-size: 100% 100%;
        background-repeat: no-repeat;

      }

      .box1-2 {
        /* 保持现有尺寸，确保背景图自适应 */
        width: 478px;
        height: 320px;
        background-position: center;
        background-size: cover;
        /* 图片自适应容器 */
        background-repeat: no-repeat;
      }
    }
  }
}

.middle {
  display: flex;
  position: absolute;
  padding: 0 90px 90px;
  left: 3364px;
  top: 257px;
  width: 2874px;
  height: 521px;
  background-image: url("/imgs/ningbo/矩形 606.png");
  background-position: left;
  background-size: 100% 100%;
  background-repeat: no-repeat;

  .content {
    align-items: center;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-content: center;
    gap: 90px;

    .img1 {
      /* position: relative; */
      left: 105px;
      top: 135px;
      width: 485px;
      height: 160px;
      background-image: url("/imgs/shanghai/组 7825.png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }

    .content1 {
      flex-direction: column;
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;

      .title {
        text-indent: 3.5ch;
        width: 2168px;
        font-size: 31px;
        color: #FFFFFF;
        line-height: 50px;
        font-family: "微软雅黑";
        color: #D6F9FF;
      }
    }
  }

  .content15 {
    display: flex;
    transform: translateX(100%);
    position: absolute;
    top: 420px;
    left: 238px;
    font-family: FZLanTingHeiS-B-GB;
    font-weight: 400;
    font-size: 53px;
    color: #FFFFFF;
    background: linear-gradient(0deg, rgba(46, 131, 183, 0.66) 10%, rgba(255, 255, 255, 1) 70%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    width: 800px;
  }

  .content18 {
    top: 550px;
    z-index: 999;
    display: flex;
    position: absolute;
    justify-content: center;
    align-content: center;
    justify-self: anchor-center;
    /* left: 97px; */
    z-index: 999;

    .tubiao1 {
      width: 102px;
      height: 102px;
      background-image: url("/imgs/shanghai/组 7752 拷贝 3.png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }

    .tubiao2 {
      width: 102px;
      height: 102px;
      background-image: url("/imgs/shanghai/组 7752.png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }

    .tubiao3 {
      width: 102px;
      height: 102px;
      background-image: url("/imgs/shanghai/组 7752 拷贝.png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }

    .tubiaoTitle {
      margin-left: 20px;
      margin-right: 20px;
      position: relative;
      top: -29px;
      width: auto;
      font-family: FZLanTingHeiS-B-GB;
      font-weight: 400;
      font-size: 42px;
      color: #FFFFFF;
      background: linear-gradient(0deg, rgba(46, 131, 183, 0.66) 10%, rgba(255, 255, 255, 1) 70%);
      -webkit-background-clip: text;

      .tubiaoValue {
        position: relative;
        top: 9px;
        margin-left: 20px;
        margin-right: 20px;
        font-family: YouSheBiaoTiHei;
        font-weight: 400;
        font-size: 86px;
        color: #FFFFFF;
        -webkit-text-fill-color: transparent;
        background: linear-gradient(45deg,
            transparent 35%,
            rgba(#fff, 0.6),
            transparent 65%) no-repeat,
          currentColor;
        background-size: 50%;
        -webkit-background-clip: text;
        animation: sweep 2s infinite;
        background: linear-gradient(0deg, rgba(0, 216, 255, 0.66) 10%, rgba(255, 255, 255, 1) 70%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }
  }

  .content19 {
    display: flex;
    position: absolute;
    top: 420px;
    left: 0;
    width: 2808px;
    height: 1641px;
    background-image: url("/imgs/ningbo/中间地球 2副本.png");
    background-position: left;
    background-size: 100% 100%;
    background-repeat: no-repeat;

    .img1 {
      position: relative;
      left: 532px;
      top: 287px;
      width: 1467px;
      height: 1199px;
      background-image: url("/imgs/ningbo/组 7764.png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }

    .img2 {
      transform: scaleX(1.5);
      position: relative;
      left: 195px;
      top: 846px;
      width: 143px;
      height: 157px;
      background-image: url("/imgs/shanghai/形状 797 拷贝 2.png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }

    .img3 {
      z-index: 99999;
      position: relative;
      left: 156px;
      top: 942px;
      width: 34px;
      height: 45px;
      background-image: url("/imgs/ningbo/点位 (3).png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }

    .img4 {
      position: absolute;
      left: -200px;
      top: 170px;
      width: 620px;
      height: 884px;
      background-image: url("/imgs/ningbo/CFL.png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }

    .img5 {
      position: absolute;
      right: -200px;
      top: 170px;
      width: 620px;
      height: 884px;
      background-image: url("/imgs/ningbo/CFL.png");
      transform: scaleX(-1);
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }


    .title {
      left: 1680px;
      top: 986px;
      position: absolute;
      font-family: FZLanTingHeiS-B-GB;
      font-weight: 400;
      font-size: 38px;
      color: #FFFFFF;
      background: linear-gradient(0deg, #E9DD7A 100%, #FFFFFF 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .pointImg {
      position: absolute;
      top: 378px;
      left: 895px;
      width: 918px;
      height: 933px;
      background-image: url("/imgs/ningbo/组 7768 拷贝.png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }
  }
}

.right {
  display: flex;
  position: absolute;
  flex-direction: row;
  flex-wrap: wrap;
  left: 6363px;
  top: 200px;

  .box {
    display: flex;
    flex-direction: row;
    margin-left: 73px;

    .headbox {
      display: flex;
      height: 158px;
      width: 1246px;
      flex-wrap: nowrap;
      flex-direction: row;
      background-image: url("/imgs/ningbo/t(1).png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;

      .headImg {
        margin-left: 220px;
        margin-top: 41px;
        width: 53px;
        height: 58px;
        background-image: url("/imgs/ningbo/菱形 拷贝.png");
        background-position: left;
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }

      .title {
        margin-left: 30px;
        margin-top: 22px;
        height: 49px;
        font-family: "微软雅黑粗体";
        font-weight: 400;
        font-size: 57px;
        color: #FFFFFF;
      }
    }

    .content {
      display: flex;
      flex-wrap: wrap;
      align-content: center;
      justify-content: center;
      position: absolute;
      top: 178px;
      width: 1461px;
      height: 489px;
      background-image: url("/imgs/shanghai/矩形 933 拷贝 3.png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;
      flex-direction: row;

      /* 按钮选中状态（变色效果） */
      .left-buttons .btn.active {
        width: 236px;
        height: 141px;
        background-image: url("/imgs/shanghai/矩形 1269.png");
        background-position: left;
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }

      .left-buttons {
        cursor: pointer;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-content: center;
        gap: 10px;

        .btn {
          padding: 20px;
          display: flex;
          align-items: anchor-center;
          text-align: center;
          width: 236px;
          height: 141px;
          background-image: url("/imgs/shanghai/矩形 1269(3).png");
          background-position: left;
          background-size: 100% 100%;
          background-repeat: no-repeat;
          font-family: "微软雅黑常规";
          font-size: 24px;
          color: #FFFFFF;
          line-height: 28px;

        }
      }

      .rightbox {
        display: flex;
        flex-direction: row;
        margin: 50px 20px;
        gap: 20px;

        .box1-1 {
          justify-content: space-around;
          display: flex;
          align-items: center;
          flex-direction: column;

          .text {
            width: 579px;
            font-family: "微软雅黑常规";
            font-weight: 400;
            font-size: 24px;
            color: #FFFFFF;
            line-height: 29px;
          }

          .btn {
            width: 178px;
            height: 59px;
            background: #1E4B79;
            border-radius: 18px;
            font-family: "微软雅黑常规";
            font-weight: bold;
            font-size: 26px;
            color: #FFFFFF;
            line-height: 60px;
            text-align: center;
          }

          .item {
            display: flex;
            flex-direction: row;
            justify-content: center;
            text-align: center;
            width: 600px;

            .item1 {
              width: 140px;
              font-family: "微软雅黑常规";
              font-weight: 400;
              font-size: 24px;
              color: #37D7FF;
              line-height: 31px;
            }

            .icon {
              width: 1px;
              height: 37px;
              background: #37ADFF;
            }
          }
        }

        .box1-2 {
          width: 478px;
          height: 320px;
          background-image: url("/imgs/shanghai/1.png");
          background-position: left;
          background-size: 100% 100%;
          background-repeat: no-repeat;
        }
      }
    }
  }

  .box2 {
    margin-left: 272px;
    display: flex;

    .headbox {
      display: flex;
      height: 158px;
      width: 1246px;
      flex-wrap: nowrap;
      flex-direction: row;
      background-image: url("/imgs/ningbo/t(1).png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;

      .headImg {
        margin-left: 220px;
        margin-top: 41px;
        width: 53px;
        height: 58px;
        background-image: url("/imgs/ningbo/菱形 拷贝.png");
        background-position: left;
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }

      .title {
        margin-left: 30px;
        margin-top: 22px;
        height: 49px;
        font-family: "微软雅黑粗体";
        font-weight: 400;
        font-size: 57px;
        color: #FFFFFF;
      }
    }

    .content {
      display: flex;
      flex-wrap: wrap;
      align-content: center;
      justify-content: center;
      align-items: flex-start;
      position: absolute;
      top: 178px;
      width: 1461px;
      height: 489px;
      background-image: url("/imgs/shanghai/矩形 933 拷贝 3.png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;

      .img1 {
        width: 1351px;
        height: 434px;
      }

      .contentTitle {
        padding: 0 20px;
        text-align: justify;
        text-justify: inter-ideograph;
        position: relative;
        line-height: 60px;
        top: -98px;
        text-indent: 3.5ch;
        width: 1356px;
        height: 100px;
        font-family: "微软雅黑常规";
        font-weight: 400;
        font-size: 34px;
        color: #FFFFFF;
      }
    }
  }

  .box3 {
    margin-left: 76px;
    display: flex;
    position: relative;
    top: 530px;
    flex-wrap: wrap;
    flex-direction: row;

    .headbox {
      display: flex;
      height: 158px;
      width: 1652px;
      flex-wrap: nowrap;
      flex-direction: row;
      background-image: url("/imgs/ningbo/t(1).png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;

      .headImg {
        margin-left: 220px;
        margin-top: 41px;
        width: 53px;
        height: 58px;
        background-image: url("/imgs/ningbo/菱形 拷贝.png");
        background-position: left;
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }

      .title {
        margin-left: 30px;
        margin-top: 22px;
        height: 49px;
        font-family: "微软雅黑粗体";
        font-weight: 400;
        font-size: 57px;
        color: #FFFFFF;
      }
    }

    .content {
      position: absolute;
      align-items: anchor-center;
      top: 178px;
      gap: 24px;
      width: 1461px;
      height: 489px;
      background-image: url("/imgs/shanghai/矩形 933 拷贝 3.png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;
      display: flex;
      flex-wrap: wrap;
      align-content: center;
      justify-content: center;
      flex-direction: row;

      .title {
        writing-mode: vertical-rl;
        font-family: "微软雅黑粗体";
        font-size: 36px;
        color: #FFFFFF;
        line-height: 32px;
        background: linear-gradient(0deg, rgba(46, 131, 183, 0.6) 10%, rgba(255, 255, 255, 1) 70%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }

      /* 按钮选中状态（变色效果） */
      .left-buttons .btn.active {
        width: 237px;
        height: 82px;
        background-image: url("/imgs/shanghai/矩形 1269.png");
        background-position: left;
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }

      .left-buttons {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-content: center;
        gap: 10px;

        .btn {
          cursor: pointer;
          padding: 20px;
          display: flex;
          align-items: anchor-center;
          text-align: center;
          width: 237px;
          height: 82px;
          background-image: url("/imgs/shanghai/矩形 1269(3).png");
          background-position: left;
          background-size: 100% 100%;
          background-repeat: no-repeat;
          font-family: "微软雅黑常规";
          font-size: 24px;
          color: #FFFFFF;
          line-height: 28px;

        }
      }

      .rightbox {
        display: flex;
        flex-direction: row;
        margin: 50px 20px;
        gap: 20px;

        .box1-1 {
          justify-content: space-around;
          display: flex;
          align-items: center;
          flex-direction: column;

          .text {
            width: 579px;
            font-family: "微软雅黑常规";
            font-weight: 400;
            font-size: 24px;
            color: #FFFFFF;
            line-height: 29px;
          }

          .btn {
            width: 178px;
            height: 59px;
            background: #1E4B79;
            border-radius: 18px;
            font-family: "微软雅黑常规";
            font-weight: bold;
            font-size: 26px;
            color: #FFFFFF;
            line-height: 60px;
            text-align: center;
          }

          .item {
            display: flex;
            flex-direction: row;

            .item1 {
              width: 110px;
              font-family: "微软雅黑常规";
              font-weight: 400;
              font-size: 24px;
              color: #37D7FF;
              line-height: 31px;
            }

            .icon {
              width: 1px;
              height: 37px;
              background: #37ADFF;
            }
          }
        }

        .box1-2 {
          width: 445px;
          height: 298px;
          background-image: url("/imgs/shanghai/1.png");
          background-position: left;
          background-size: 100% 100%;
          background-repeat: no-repeat;
        }
      }
    }
  }
}
</style>